<template>
	<div class="home">
	  <!-- <router-link to="/music" >go music</router-link> -->
		<img class="imgbg" src="../../../resource/img/homepage.png">
		<!-- <img class="imgbt" src="../../../resource/img/shake.png" v-on:click="goMusci()"> -->
		<img class="imgbt" src="../../../resource/img/shake.png" >
		<img class="imgair" src="../../../resource/img/air.png" >
		<img class="imgmusic1" src="../../../resource/img/music1.png" >
		<img class="imgmusic2" src="../../../resource/img/music2.png" >
		<img class="imgmusic3" src="../../../resource/img/music3.png" >
		<img class="imgmusic4" src="../../../resource/img/music4.png" >
	
		 <!-- <img class="button1"  v-show=true src="../../../resource/img/button1.png" v-on:click="go()"> -->
		<a href="javascript:void(0)"><img class="button1"   src="../../../resource/img/button1.png" v-on:click="go()"></a>
		 <!-- <img class="button1" v-show='!showimg'  src="../../../resource/img/button2.png">  -->
		<audio id="musicAudio" autoplay="autoplay" loop="loop" src="music.mp3"></audio>
	</div>
</template>
	

<script>
	export default {
		data(){
			return{
				showimg:true,
			}
		},
    	mounted(){
          
		      setTimeout(function(){
		         $.ajax({
		              type: 'GET',
		              url: '//showcase.display.taobao.com/store/addStore.json',
		              // data to be added to query string:
		              data: { "app": "ynbyShop","storeId":"229005812" },
		              // type of data we are expecting in return:
		              dataType: 'jsonp',
		              jsonp: 'callback',
		              success: function(data){
		                // Supposing this JSON payload was received:
		                //   {"project": {"id": 42, "html": "<div>..." }}
		                // append the HTML to context object.
		                console.log(JSON.stringify(data));
		              },
		              error: function(xhr, type){
		                alert('Ajax error!')
		              }
		            })

		 		},200);


   		},
		methods: {
			go:function () {
				_czc.push(["_trackEvent", 'yunnanbaiyao', 'enterWeb', '', '', '']);
				window.location.href="https://equity-vip.tmall.com/agent/mobile.htm?agentId=51045&_bind=true";
				/*this.showimg = !this.showimg;*/
				// var src = "../../resource/img/button2.png";    //新图片地址
				// alert($('.button1').attr("src"))
    // 			$('.button1').attr("src","../../resource/img/button2.png");
			}
		}
}
</script>

<style>
.imgair{
   position: absolute;
	width: 1.4rem;
	height: 2rem;
	right: 0.5rem;	
	bottom:10rem;
	z-index: 2;
    /*border: 0.01rem blue solid;*/

    animation: imgairs 3s infinite;
    -webkit-animation: imgairs 3s infinite;
}
@keyframes imgairs
{
    0% {bottom:10rem;}
    50%{bottom:10.1rem;}
    100%{bottom:10rem;}
}

@-webkit-keyframes imgairs
{
    0% {bottom:10rem;}
    50%{bottom:10.1rem;}
    100%{bottom:10rem;}

}
.button1{
   position: absolute;
	width: 4.25rem;
	left: 1.65rem;
	bottom: 7.55rem;
	z-index: 2;
    /*border: 0.01rem blue solid;*/

   animation: button1 linear 2s infinite;
    -webkit-animation: button1 linear 2s infinite;

}
@keyframes button1
{
  /*  0% {transform:translateY(1rem);}
    50%{transform:translateY(2rem);}
    100%{transform:translate(3rem);}*/
    0% {transform:scale(1)}
    25%{transform:scale(.95)}
    50%{transform:scale(1)}
    75%{transform:scale(1.05)}
    100%{transform:scale(1)}
}

@-webkit-keyframes button1
{
    /*0% {-webkit-transform:translateZ(0rem);}
    50%{-webkit-transform:translateZ(4rem);}
    100%{-webkit-transform:translateZ(2rem);}*/
    0% {-webkit-transform:scale(1)}
    25%{-webkit-transform:scale(.95)}
    50%{-webkit-transform:scale(1)}
    75%{-webkit-transform:scale(1.05)}
    100%{-webkit-transform:scale(1)}
    
}


.imgmusic1{
   	position: absolute;
	width: 1rem;
	left: 1rem;	
	bottom:5rem;
	z-index: 2;

    animation: imgmusic1 3s infinite;
    -webkit-animation: imgmusic1 3s infinite;
}
@keyframes imgmusic1
{
    0% {left:1rem;}
    50%{left:0.7rem;}
    100%{left:1rem;}
}

@-webkit-keyframes imgmusic1
{
    0% {left:1rem;}
    50%{left:0.7rem;}
    100%{left:1rem;}
}

.imgmusic2{
   	position: absolute;
	width: 1rem;
	left: 4.5rem;
	bottom:6.1rem;
	z-index: 2;
    animation: imgmusic2 3s infinite;
    -webkit-animation: imgmusic2 3s infinite;
}
@keyframes imgmusic2
{
    0% {transform:rotate(0deg);}
    50%{transform:rotate(15deg);}
    100%{transform:rotate(0deg);}
}

@-webkit-keyframes imgmusic2
{
    0% {transform:rotate(0deg);}
    50%{transform:rotate(15deg);}
    100%{transform:rotate(0deg);}
}

.imgmusic3{
    position: absolute;
	width: 1.4rem;
	left: 0.5rem;	
	bottom:12.3rem;
	z-index: 2;
    animation: imgmusic3 3s infinite;
    -webkit-animation: imgmusic3 3s infinite;
}
@keyframes imgmusic3
{
    0% {left:0.5rem;}
    50%{left:0.7rem;}
    100%{left:0.5rem;}
}

@-webkit-keyframes imgmusic3
{
    0% {left:0.5rem;}
    50%{left:0.7rem;}
    100%{left:0.5rem;}
}

.imgmusic4{
  	position: absolute;
	width: 0.8rem;
	right: 0.3rem;
	bottom:5.3rem;
	z-index: 2;
    animation: imgmusic4 3s infinite;
    -webkit-animation: imgmusic4 3s infinite;
}
@keyframes imgmusic4
{
    0% {right:0.3rem;}
    50%{right:0.7rem;}
    100%{right:0.3rem;}
}

@-webkit-keyframes imgmusic4
{
    0% {right:0.3rem;}
    50%{right:0.7rem;}
    100%{right:0.3rem;}
}

.home{
	position: relative;
	width: 7.5rem;
	height: 100%;
	overflow: hidden;
}
.imgbg{
	position: absolute;
	left: 0;
	bottom:0rem;
	width: 7.5rem;
	height: auto;
}
.imgbt{
	position: absolute;
	width: 1.93rem;
	height:2.07rem;
	left: 3.75rem;
	
	margin-left: -0.965rem;
	bottom:1.15rem;
	z-index: 2;
}

/*.imgair{
	position: absolute;
	width: 1.4rem;
	right: 0.5rem;	
	bottom:1.3rem;
	z-index: 2;
}*/
/*.imgmusic1{
	position: absolute;
	width: 1rem;
	left: 1rem;	
	bottom:7rem;
	z-index: 2;
}*/
/*.imgmusic2{
	position: absolute;
	width: 1.1rem;
	left: 4.5rem;
	bottom:6.1rem;
	z-index: 2;
}*/
/*.imgmusic3{
	position: absolute;
	width: 1.4rem;
	left: 0.5rem;	
	bottom:0rem;
	z-index: 2;
}
.imgmusic4{
	position: absolute;
	width: 0.8rem;
	right: 0.3rem;
	bottom:5.3rem;
	z-index: 2;
}*/

</style>
